<template>
  <div id="wrap">
    <div class="header">
      <el-form :inline="true" class="form">
        <el-form-item label="姓名">
          <el-input
            v-model="name"
            placeholder="请输入姓名"
            class="inputWidth"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="buttonInput">
        <el-button type="success" @click="add">新增</el-button>
        <el-button type="primary" @click="getList">搜索</el-button>
      </div>
    </div>
    <div class="box">
      <el-table :data="tableData">
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="220"
          align="center"
        ></el-table-column>

        <el-table-column label="照片" align="center">
          <template>
            <!-- <el-button
              type="success"
              size="mini"
              plain
              @click="details(scope.row)"
              >查看</el-button
            > -->
            <el-image
              style="width: 35px; height: 35px"
              :src="url"
              :preview-src-list="srcList"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              plain
              @click="deleteRow(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="list.current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="list.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <add-dialog ref="addDialog"></add-dialog>
  </div>
</template>

<script>
import addDialog from "./components/add.vue"
export default {
  components: {
    addDialog,
  },
  data() {
    return {
      name: "",
      list: {
        current: 1,
        size: 10,
      },
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      ],
      total: 0,
      tableData: [
        {
          name: "帅哥",
        },
      ],
    }
  },

  mounted() {},
  methods: {
    handleSizeChange(val) {
      this.list.size = val
    },
    handleCurrentChange(val) {
      this.list.current = val
    },
    details() {},
    getList() {},
    add() {
      this.$refs.addDialog.dialogVisible = true
    },
    deleteRow() {},
  },
}
</script>

<style lang="scss" scoped>
#wrap {
  padding: 20px;
  height: 760px;
  background-color: #fff;
}
.header {
  overflow: hidden;
  .form {
    float: left;
  }
  .buttonInput {
    float: right;
  }
}
.inputWidth {
  width: 200px;
}
.box {
  width: 100%;
  height: 680px;
  border-radius: 5px;
  position: relative;
  .el-table {
    max-height: 620px;
    overflow-y: auto;
  }
  .buttonInput {
    float: right;
  }
}
.pagination {
  position: absolute;
  bottom: 80px;
  right: 50px;
}
</style>
